<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        ul li{
            list-style: none;
            padding:2px 4px;
            border:1px solid gray;
            display: inline;
        }

        li.active{
            background: lightblue;
        }

        .operation{
            display: flex;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="con"></div>
        <div class="operation">
            <div class="left-btn"><</div>
            <select class="select"></select>
            <ul class="nav-list"></ul>
            <div class="right-btn">></div>
        </div>
    </div>

    <script>
        let data = [];

        for(let i = 0; i<20;i++){
            data.push({
                title:`标题${i+1}`
            })
        }
        class Pagenation{
            constructor(params){
                this.box = this.getDom(params.box);
                this.leftBtn = this.getDom('.left-btn',this.box);
                this.rightBtn = this.getDom('.right-btn',this.box);
                this.navList = this.getDom('.nav-list',this.box);
                this.select = this.getDom('.select',this.box);
                this.con = this.getDom('.con');
                this.data = params.data;
                this.selectArr = params.selectArr;    
                this.init();
                this.addEvent();
            }

            init(){
                this.limit = this.selectArr[0];
                this.pagenum = 1;
                this.renderSelect();
                this.renderNav();
                this.renderCon();
            }

            addEvent(){
                this.select.onchange = () => {
                    this.limit = this.select.value*1;
                    console.log(this.limit)
                    this.pagenum = 1;
                    this.con.innerHTML = '';
                    this.renderCon();
                }
            }

            renderCon(){
                let start = this.limit*(this.pagenum-1);
                let end = this.limit*this.pagenum;

                let pageData = this.data.slice(start,end);
                
                this.con.innerHTML = pageData.map((item) => {
                    return `<p>${item.title}</p>`
                }).join('')
            }

            renderNav(){
                let size = Math.ceil(this.data.length/this.limit);
                console.log(size)

                for(let i = 0; i< size;i++){
                    let li = document.createElement('li');
                    li.innerHTML = i+1;
                    if(i === 0){
                        li.classList.add('active');
                    }
                    this.navList.appendChild(li);
                }

            }

            renderSelect(){
                let selectStr = this.selectArr.map(item => {
                    return `<option value='${item}'>每页显示${item}条数据</opiton>`
                }).join('');

                this.select.innerHTML = selectStr;
            }

            getDom(ele,parent){
                return typeof ele === 'object' ? ele : (parent || document).querySelector(ele)
            }
        }

        new Pagenation({
            box:'.wrap',
            selectArr:[2,4,6,8],
            data:data
        })
    </script>

</body>
</html>